<template>
  <div class="demo-pagination-block">
    <div class="demonstration">All combined</div>
    <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[5, 10, 15, 20]"
      :size="size" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
      :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
</template>

<script>
import instance from '@/utils/request'
export default {
  data() {
    return {
      currentPage4: 1,
      pageSize4: 20,
      size: 'default',
      background: false,
      disabled: false,
      subjectList: [],
      total:0
    }
  },
  methods: {

    handleSizeChange(val) {
      console.log(`${val} items per page`);
    },
    handleCurrentChange(val) {
      console.log(`current page: ${val}`);
    }

  },
  created() {
    const data = { page: this.currentPage4, pageSize: this.pageSize4 } 
    instance.get('subject',{ params: data }).then(result => {
      console.log(data);
      this.total = result.data.data.total || 0;
            this.subjectList = result.data.data.subjectList || [];
      console.log(this.subjectList);
      
    })
  }
};
</script>

<style scoped>
.demo-pagination-block+.demo-pagination-block {
  margin-top: 10px;
}

.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>